<template>
  <div class="wrap">
    <div class="bgWrap">
      <div class="item">
        <div class="left">
          <em class="redPoint"></em>
          规格图片
        </div>
        <div class="right">
          <van-uploader
            v-model="fileListGoods"
            :after-read="afterReadGoods"
            :max-count="1"
            class="uploadImg"
          />
        </div>
      </div>
       <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          规格名称
        </div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="sizeName"
            maxlength="6"
            placeholder="请输入规格名称(6字内)"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          规格价格
        </div>
        <div class="inputWrap">
          <input
            type="number"
            name=""
            value=""
            v-model="sizePrice"
            placeholder="请输入规格价格"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">
          <em class="redPoint"></em>
          规格库存
        </div>
        <div class="inputWrap">
          <input
            type="number"
            name=""
            v-model="sizeNumber"
            maxlength="35"
            placeholder="请输入规格库存"
          />
        </div>
      </div>
    </div>
     <div class="nextButton" @click="JumpNext">完成</div>
  </div>
</template>

<script>
import { Switch, Checkbox, Popup, Picker, Uploader } from "vant";
import axios from "axios"; // 引入axios
import { apiPlatformTypeList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      fromId:this.$route.query.fromId,//从新增规格来的0，从编辑来的为1
      sizeName: "", //规格名称
      sizePrice:'',//规格价格
      sizeNumber:'',//规格库存
      fileListGoods: [], //商品大图-组件
      goodsImg: "", //商品大图-服务器地址
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    
  },
  methods: {
    //上传规格图片到服务器
    afterReadGoods(file) {
      var that = this;
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      var files = file.file;
      form_data.append("file", files);
      axios({
        url: serverSrc + "/common/upload",
        data: form_data,
        contentType: false,
        processData: false,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        that.goodsImg = res.data.data.fileName;
      });
    },
    //封装保存已经填写的信息
    saveFillInfo() {
      var getInfo = JSON.parse(localStorage.getItem("shopGoodsSpecsList"))
      var shopGoodsSpecsList = []
      if(getInfo){
        shopGoodsSpecsList=getInfo //如果添加过那么就先把已经添加过的放进去
      }
      var sizeObj = {};  //将最新添加的商品规格信息放进去
      sizeObj.imageUrl = this.goodsImg;
      sizeObj.price = this.sizePrice;
      sizeObj.stock = this.sizeNumber;
      sizeObj.title = this.sizeName;
      shopGoodsSpecsList.push(sizeObj)
      console.log("shopGoodsSpecsList",shopGoodsSpecsList)
      localStorage.setItem("shopGoodsSpecsList",JSON.stringify(shopGoodsSpecsList))
    },
    //下一步
    JumpNext() {
      if(this.goodsImg==''){
        this.$toast.fail('请上传规格图片')
        return
      }
      if(this.sizePrice==''){
        this.$toast.fail('请填写价格')
        return
      }
      if(this.sizeNumber==''){
        this.$toast.fail('请填写库存')
        return
      }
       if(this.sizeNumber==''){
        this.$toast.fail('请填写规格名称')
        return
      }
        this.saveFillInfo()
        this.$router.push({
            // path: "/pages/bEidtorSize",
            path: "/pages/bAddGoods",
            query: {
            //传递参数
            fromId:0,
            },
        });
    },
  },
  created() {},
  components: {
    [Switch.name]: Switch,
    [Checkbox.name]: Checkbox,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Uploader.name]: Uploader,
  },
};
</script>

<style scoped>
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 20px auto;
  background: #ffffff;
  border-radius: 20px;
}
.item {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 15px;
}
.left {
  float: left;
  margin-top: 30px;
}
.redPoint {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #ff4646;
  border-radius: 50%;
  margin-bottom: 2px;
}
.right {
  float: right;
}
.uploadImg {
  /* width: 50px;
  height: 50px; */
}

.inputWrap {
  width: 100%;
  background: #f2f4fa;
  height: 40px;
  margin-top: 10px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
}
input {
  border: 0px;
  background: #f2f4fa;
  width: 85%;
  height: 38px;
  margin-left: 15px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
.rightArrow {
  width: 4px;
  height: 8px;
  margin-right: 15px;
  margin-top: 15px;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 15px;
  left: 2.5%;
}
</style>
